<template>
	<div>
		<Card>
			<div style="margin-bottom: 30px;">
				<label class="myLabel">应用分组：</label>
				<Select v-model="name" style="width:200px" @on-change="getList()">
					<Option v-for="item in nameList" :value="item.metadata.name" :key="item.metadata.name">{{ item.metadata.name }}</Option>
				</Select>
			</div>
			<!-- <Button style="margin: 10px 0;" type="primary" @click="createNsall = true" class="large">创建实例</Button>
			<Button style="margin: 10px 0;" type="primary" @click="setRouter" class="large">配置路由</Button> -->
			<Modal v-model="editRouter" title="配置路由" width="800" footer-hide>
				<Input v-model="routerText" type="textarea" :rows="30" placeholder="Enter something..." />
				<Button type="primary" @click="reBoot" style="float: right;margin-left: 10px;margin-top:20px;">刷新配置</Button>
				<Button type="primary" @click="editRouterText" style="float: right;margin-top:20px;">修改配置</Button>
			</Modal>
			<Modal v-model="editApps" title="修改" width="800" footer-hide>
				<Input v-model="editAppsText" type="textarea" :rows="30" placeholder="Enter something..." />
				<Button type="primary" style="float: right;margin-left: 10px;margin-top:20px;" @click="update">更新</Button>
				<Button type="primary" style="float: right;margin-top:20px;" @click="editApps=false">取消</Button>
			</Modal>
			<Modal v-model="delectApps" title="删除" width="800" @on-ok="remove" @on-cancel="cancel">
				是否删除该项？
			</Modal>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				columns: [
					{
						title: '应用名称',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							return h('span', params.row.metadata.name)
						}
					},
					{
						title: '应用分组',
						key: 'metadata',
						width: '120px',
						render: (h, params) => {
							return h('span', params.row.metadata.namespace)
						}
					},
					{
						title: '标签',
						key: 'metadata',
						render: (h, params) => {
							let str = ''
							for (var item in params.row.metadata.labels) {
								str += item + ':' + params.row.metadata.labels[item] + '\n'
							}
							return h('div', str)
						}
					},
					{
						title: '状态',
						key: 'status',
						width: '80px',
						render: (h, params) => {
							for (let i = 0; i < params.row.status.conditions.length; i++) {
								if (params.row.status.conditions[i].status !== 'True') {
									return h('span', '非正常')
								} else {
									return h('span', '正常')
								}
							}
						}
					},
					{
						title: '启动时间',
						key: 'metadata',
						width: '200px',
						render: (h, params) => {
							var date1 = new Date(params.row.metadata.creationTimestamp).toString().replace(/-/g, '/')
							var date2 = new Date(+new Date(date1) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
							return h('span', date2)
						}
					},
					{
						title: '容器组',
						key: 'spec',
						width: '80px',
						render: (h, params) => {
							return h('span', params.row.status.availableReplicas + '/' + params.row.spec.replicas)
						}
					},
					{
						title: '镜像',
						key: 'spec',
						render: (h, params) => {
							return h('span', params.row.spec.template.spec.containers[0].image)
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.editApps = true
											this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.type + '&nameSpace=' + myRow.namespace + '&name=' + myRow.name, {}, r => {
												if (r.data.code === 0) {
													console.log(r.data.data)
													this.editAppsText = JSON.stringify(r.data.data, null, 4)
												}
											})
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'appDetails',
												params: {
													type: this.type,
													group: params.row.metadata.namespace,
													name: params.row.metadata.name
												}
											})
										}
									}
								}, '详情'),
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									on: {
										click: () => {
											let myRow = params.row.metadata
											this.delectApps = true
											this.delectName = myRow.name
											this.delectSpace = myRow.namespace
										}
									}
								}, '删除')
							])
						}
					}
				],
				tableData: [],
				name: '',
				nameList: [],
				nsName: '',
				user: {},
				status: 100,
				editId: 0,
				// 临时名称组
				NameList: [],
				// 用户列表
				peopleList: [],
				timer: {},
				editRouter: false,
				routerText: '',
				// 应用类型
				type: 'Deployment',
				// 应用类型列表
				typeList: [
					{
						name: 'Deployment',
						text: '部署'
					},
					{
						name: 'ReplicationController',
						text: '副本控制器'
					},
					{
						name: 'Service',
						text: '服务'
					},
					{
						name: 'Pod',
						text: '容器'
					}
				],
				// 修改面板
				editApps: false,
				// 修改配置文本
				editAppsText: '',
				// 删除面板
				delectApps: false,
				// 删除数据
				delectAppsText: '',
				// 删除name
				delectName: '',
				// 删除space
				delectSpace: '',
				count: 0,
				pageSize: 5,
				myData: []
			}
		},
		methods: {
			// 展示信息回调
			show (index) {
				this.$Modal.info({
					title: '信息',
					content: `实例名称：${this.tableData[index].metadata.name}<br>标签：-<br>状态：${this.tableData[index].status.phase}<br>启动时间：${this.tableData[index].metadata.creationTimestamp},<br>所在节点：${this.tableData[index].spec.nodeName}`
				})
			},
			// 删除
			remove () {
				this.$api.delete(0, '/kuber/v2/k8s/apps?type=' + this.type + '&name=' + this.delectName + '&nameSpace=' + this.delectSpace, {}, r => {
					if (r.data.code === 0) {
						this.delectApps = false
						this.getList()
						this.$Message.success('删除成功')
					} else {
						this.$Message.error('删除失败')
					}
				})
			},
			// 命名选择的命名空间
			getList () {
				let str = ''
				if (this.name === '全部' || this.name === '') {
					str = ''
				} else {
					str = '&nameSpace=' + this.name
				}
				this.$api.get(0, '/kuber/v2/k8s/apps?type=' + this.type + str, {}, r => {
					if (r.data.code === 0) {
						this.myData = r.data.data.items
						this.count = this.myData.length
						this.getListByPage(1)
					}
				})
			},
			cancel () {
				this.editId = 0
			},
			// 配置路由
			setRouter () {
				this.editRouter = true
				this.$api.get(0, '/kuber/description/config', {}, r => {
					if (r.data.code === 0) {
						this.routerText = r.data.data
					}
				})
			},
			// 修改路由
			editRouterText () {
				this.$api.post(0, '/kuber/description/config', {
					config: this.routerText
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('修改成功')
					} else {
						this.$Message.error('修改失败')
					}
				})
			},
			reBoot () {
				this.$api.post(0, '/kuber/description/reboot', {}, r => {
					if (r.data.code === 0) {
						this.$Message.success('刷新成功')
					} else {
						this.$Message.error('刷新失败')
					}
				})
			},
			// 应用类型获取
			getType () {},
			// 更新
			update () {
				this.$api.post(0, '/kuber/v2/k8s/apps', {
					type: this.type,
					yml: this.editAppsText
				}, r => {
					if (r.data.code === 0) {
						this.editApps = false
						this.$Message.success('更新成功')
						this.getList()
					} else {
						this.$Message.error('更新失败')
					}
				})
			},
			// 分页
			handlePage (page) {
				this.getListByPage(page)
			},
			// 根据页码获取数据
			getListByPage (page) {
				this.tableData = []
				for (let i = 0; i < this.pageSize; i++) {
					if (this.myData[i + (page - 1) * this.pageSize] !== undefined) {
						this.tableData.push(this.myData[i + (page - 1) * this.pageSize])
					}
				}
			}
		},
		mounted () {
			this.user = JSON.parse(sessionStorage.user)
			// 命名空间列表
			this.$api.get(0, '/kuber/v2/k8s/nameSpace', {}, r => {
				this.nameList = r.data.data.items
				this.nameList.push({metadata: {name: '全部'}})
			})
			this.getList()
		},
		destroyed () {
			let my = this
			window.clearInterval(my.timer)
		}
	}
</script>

<style>
	label.myLabel {
		width: 120px;
		display: inline-block;
		margin-right: 15px;
		text-align: right;
	}
	label.myLabel span{
		font-size: 12px;
		color: #ddd
	}
	div.form-div {
		margin-bottom: 15px;
	}
</style>
